<template>
  <section class="main">
    <input id="toggle-all" class="toggle-all" type="checkbox">
    <label for="toggle-all" @click="all">Mark all as complete</label>
    <ul class="todo-list">
      <template v-for="item in todoList" :key="item.id">
        <li :class="{completed:item.isFinish}" v-if="item.isDel === false">
          <div class="view">
            <input class="toggle" type="checkbox" @click="toggle(item)">
            <label>{{item.content}}</label>
            <button class="destroy" @click="del(item)"></button>
          </div>
          <input class="edit">
        </li>
      </template>
    </ul>
  </section>
</template>

<script>
export default {
  // 方法集合
  methods: {
    toggle(item) {
      this.$emit('toggle', item)
    },
    del(item) {
      this.$emit('del', item)
    },
    all() {
      this.$emit('all')
    }
  },
  props: {
    todoList: Array
  }
}
</script>

<style lang='less' scoped>
</style>